import React, { useEffect, useState } from 'react'
import Search from '@/components/searchView'
import './index.modules.scss'
import Add from './components/add'
import {
  Button,
  Space,
  Table,
  Image,
  Popconfirm,
  message,
  Pagination
} from 'antd'
import { productList, productDelete } from '@/http/api/resource'
let pageData = {
  page: 1,
  size: 10,
  total: 0
}
let typeList = [
  {
    title: '产品名称',
    type: 'inpute'
  }
]
const App = React.forwardRef((props, ref) => {
  const handleChildMethod = () => {
    getList()
  }

  React.useImperativeHandle(ref, () => ({
    handleChildMethod
  }))
  const [messageApi, contextHolder] = message.useMessage()
  const [isShowAdd, setIsShowAdd] = useState(true)
  const [TableData, setTableData] = useState([])
  const [Detils, setDetils] = useState({})
  const [type, settype] = useState(0) // 0为详情1为编辑3为添加
  const columns = [
    {
      title: '产品名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center'
    },
    {
      title: '产品封面',
      dataIndex: 'coverImg',
      align: 'center',
      key: 'coverImg',
      render: (coverImg) => {
        return (
          <Image
            width={60}
            height={60}
            src={coverImg}
            fallback=""
          />
        )
      }
    },
    {
      title: '产品类型',
      dataIndex: 'type',
      align: 'center',
      key: 'type'
    },
    {
      title: '产品名称',
      key: 'name',
      align: 'center',
      dataIndex: 'name'
    },
    {
      title: '产品标题',
      key: 'title',
      align: 'center',
      dataIndex: 'title'
    },
    {
      title: '观看数',
      key: 'lookNumber',
      align: 'center',
      dataIndex: 'lookNumber'
    },
    {
      title: '收藏数',
      key: 'collectNumber',
      align: 'center',
      dataIndex: 'collectNumber'
    },
    {
      title: '操作',
      key: 'action',
      render: (data) => (
        <Space size="middle">
          <Button
            onClick={() => {
              setIsShowAdd(false)
              setDetils(data)
              settype(0)
            }}
          >
            详情
          </Button>
          <Button
            type="primary"
            onClick={() => {
              setIsShowAdd(false)
              setDetils(data)
              settype(1)
            }}
          >
            编辑
          </Button>
          <Popconfirm
            title="删除"
            description="确定删除吗?"
            placement="top"
            onConfirm={async () => {
              await productDelete({ id: data._id })
              messageApi.success('删除成功')
              getList()
            }}
            onCancel={() => {
              message.error('取消删除')
            }}
            okText="是"
            cancelText="不"
          >
            <Button type="primary" danger>
              删除
            </Button>
          </Popconfirm>
        </Space>
      )
    }
  ]
  const getList = async () => {
    pageData.appid = localStorage.getItem('appid')
    const res = await productList(pageData)
    setTableData(
      res.data.res.map((item, index) => {
        return {
          ...item,
          key: index
        }
      })
    )
    pageData.total = res.data.total
  }
  const pageChangeFn = (page, pageSize) => {
    pageData.page = page
    pageData.size = pageSize
    getList()
  }
  return (
    <div>
      {isShowAdd ? (
        <div>
          <Search typeList={typeList}></Search>
          <div className="buttonBox">
            <Button
              type="primary"
              onClick={() => {
                setIsShowAdd(false)
                settype(3)
              }}
            >
              新增商品
            </Button>
          </div>
          <div>
            <Table
              pagination={false}
              bordered
              columns={columns}
              dataSource={TableData}
            />
            <div className="Pagin">
              <Pagination
                onChange={pageChangeFn}
                defaultCurrent={pageData.page}
                total={pageData.total}
              />
            </div>
          </div>
        </div>
      ) : (
        <Add
          isShowAddFn={() => {
            setIsShowAdd(true)
            getList()
            setDetils({})
          }}
          myData={Detils}
          type={type}
        ></Add>
      )}
      {contextHolder}
    </div>
  )
})
export default App
